<template>
  <el-form
    :model="form"
    :rules="rules"
    ref="UserDate"
    label-width="80px"
    class="mineself"
  >
    <div class="updateinfo">
      <el-form-item label="头像" prop="avatar">
        <img :src="localinfo" alt="" />
        <el-button style="margin-left: 10px" type="primary" plain size="small">
          <el-icon><Edit /></el-icon>
        </el-button>
      </el-form-item>
      <el-form-item label="身份证号" prop="idcard">
        <el-input v-model="UserDate.idcard"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="UserDate.name"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="telephone">
        <el-input v-model="UserDate.telephone"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-switch
          v-model="UserDate.sex"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="男"
          inactive-text="女"
          :active-value="1"
          :inactive-value="0"
        >
        </el-switch>
      </el-form-item>
      <el-form-item label="住址" prop="address">
        <el-input v-model="UserDate.address"></el-input>
      </el-form-item>
      <div style="text-align: center">
        <el-button type="primary">修改</el-button>
        <el-button type="primary" @click="onLogout"> 退出登录 </el-button>
      </div>
    </div>
  </el-form>
</template>

<script>
export default {
  name: 'Mineself',
  data() {
    return {
      UserDate: {},
      localinfo:
        'https://img1.baidu.com/it/u=1056497728,1432074733&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    };
  },
  methods: {
    getuserDate() {
      //获取当前用户名和头像用*分隔开
      let token = localStorage.getItem('token');
      this.$http
        .post('/inoculations/user/getTokenId', token)
        .then((res) => {
          if (res.statusCode == '200') {
            this.UserDate = res.data;
            localStorage.setItem('profile', JSON.stringify(res.data));
          }
        })
        .catch(() => {
          ElMessage.error('数据加载失败,请刷新！');
        });
    },
    onLogout() {
      localStorage.removeItem('token');
      localStorage.removeItem('profile');
      this.$router.push('/userlogin');
    },
  },
  created() {
    this.getuserDate();
  },
};
</script>

<style scoped>
.mineself {
  width: 400px;
}
.updateinfo {
  margin: 20px;
}
.updateinfo img {
  height: 80px;
  width: 80px;
}
</style>
